    <template>
        <s-layout id="layout" :tabbarshow="false" navbar="normal" :title="title" :autoBack="true" leftIconColor="#333" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
            <view id="app" :style="{ backgroundImage: backgroundImage, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
                <!-- 搜索框 -->
                <view class="SearchBox">
                    <s-search-keyword :placeholder="'搜索合同'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
                <scroll-view ref="scroll" scroll-y class="list_bottom" @scrolltolower='listScrolltolower'
                    v-if="contractlist.length" show-scrollbar="true" :refresher-enabled="isOpenRefresh"
                    :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
                    @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
                    @refresherabort="onAbort" @scroll="onScroll">
                    <view class="bottom_item" v-for="(item, index) in contractlist" :key="index" @click="skip(item)">
                        <image v-if="item.mimetype = 'application/pdf'" :src="`${baseUrl}/uploads/uniapp_image/staff/pdf.png`"></image>
                        <image v-else-if="item.mimetype = 'application/msword'" :src="`${baseUrl}/uploads/uniapp_image/staff/word.png`"></image>
                        <image v-else-if="item.mimetype = 'application/vnd.ms-excel'" :src="`${baseUrl}/uploads/uniapp_image/staff/excel.png`"></image>
                        <image v-else :src="`${baseUrl}/uploads/uniapp_image/staff/ Contract_IconIMG.png`"></image>
                        <view class="text">
                            <view class="filename">{{ item.filename }}</view>
                            <view class="dates">到期时间：{{ item.expire_date }}&nbsp;&nbsp;{{ formatFileSize(item.filesize) }}</view>
                        </view>
                    </view>
                    <view>
                        <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
                    </view>
                </scroll-view>
                <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
            </view>
        </s-layout>
    </template>

    <script setup>
    import {
    ref,
    } from 'vue';

    import {
    onLoad,
    onReachBottom
    } from '@dcloudio/uni-app';

    import sheep from '@/sheep';
    import { baseUrl } from '@/sheep/config';
    const state = ref({
    bgColor: '#fff',
    title: ''
    })
    import {
    formatFileSize
    } from '@/utils/fn.js';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    const status = ref()//type 类型

    const title = ref('合同列表')
    const backgroundImage = ref('')
    //项目文件id

    const category_id = ref();
    onLoad((options) => {
    category_id.value = options.category_id
    if(options.category_id == 4) {
        title.value = '资质文件'
        backgroundImage.value = `url( ${baseUrl}/uploads/uniapp_image/user_v1/zizhiwenjian_bg1@2.png)`
    } else {
        title.value = '合同列表'
        backgroundImage.value = `url( ${baseUrl}/uploads/uniapp_image/user_v1/hetongliebiao_bg1@2.png)`
    }
    let params = {
        filter: JSON.stringify({
            type: status.value,
            category_id: category_id.value,
        }),
        op: JSON.stringify({
            type: '=',
            category_id: '=',
        }),
    };
    // companyNameList(params);
    getContractList(params);

    });
    const loadmoreRef = ref()
    // 列表内容部分
    const contractlist = ref([])
    const listPage = ref()
    const listlast_page = ref();
    const listpagenumber = ref(1);
    // 获取合同管理数据
    const getContractList = async (params) => {
    const res = await sheep.$api.contract.getAttachmentIndex(params);
    contractlist.value = [...contractlist.value, ...res?.data.rows];
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page
    
    
    };
    // 滚动触底
    const listScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower()
    if (listPage.value >= listlast_page.value) return;
    listpagenumber.value += 1
    let params = {
        filter: JSON.stringify({
            type: status.value,
            category_id: category_id.value,
        }),
        op: JSON.stringify({
            type: '=',
        }),
        page: listpagenumber.value,
    }
    getContractList(params)
    };
    // // 搜索班次
    const searchKeyWord = (srarch_value) => {
    setTimeout(function () {
        contractlist.value = []
        listpagenumber.value = 1
        let params = {
            filter: JSON.stringify({
                'filename': srarch_value,
                'type': status.value,
                'category_id': category_id.value,
            }),
            op: JSON.stringify({
                'filename': 'LIKE',
                "type": "=",
                "category_id": "="
            }),
            current_page: 1,
        };
        getContractList(params)
    }, 1000);
    };


    // 页面跳转详情
    const skip = (item) => {
    sheep.$router.go('/subpackage/staff/workbench/contract/contract_detail', {
        id: item.id,

    });
    };
    // 页面下拉刷新
    const freshing = ref(false)
    const triggered = ref(false)
    const isOpenRefresh = ref(true)  // 是否开启下拉
    // 自定义下拉刷新控件被下拉
    const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
    }
    // 自定义下拉刷新被触发
    const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
        listpagenumber.value = 1;
        contractlist.value = []
        triggered.value = false;
        freshing.value = false;
        getContractList();
    }, 500);
    }
    // 自定义下拉刷新被复位
    const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
    }
    // 自定义下拉刷新被中止
    const onAbort = () => {
    }
    </script>

    <style lang="scss" scoped>
    .app {
    width: 100%;
    height: auto;
    }

    ::v-deep .uni-popup__wrapper {
    flex: 1;
    width: 100vw !important;
    }

    .content {
    padding: 80rpx 40rpx 10rpx 40rpx;
    box-sizing: border-box;
    // height: 540rpx;
    width: 100%;

    .title {
        color: rgb(84, 119, 255);
        font-size: $uni-font-size-base;
        background-color: rgb(246, 248, 255);
        text-align: center;
        padding: 20rpx;
        border-radius: 10rpx;
    }

    .center {
        border-bottom: 1px solid #e5e5e5;
    }

    .text {
        color: rgb(153, 153, 153);
        font-size: $uni-font-size-base;
    }

    .bottom {
        display: flex;
        justify-content: space-between;
    }

    .btnArr {
        display: flex;
    }
    }

    .flex {
    display: flex;
    // margin-left: 10rpx;
    }

    .box_view {
    display: flex;

    image {
        width: 50rpx;
        height: 50rpx;
        margin-left: 10rpx;
        margin-top: 10rpx;
    }
    }

    .list_bottom {
    width: calc(100% - 40rpx);
    height: 68vh;
    margin: 0 auto;
    background: $uni-bg-color;
    border-radius: 20rpx;

    }

    .bottom_item {
    margin: 40rpx 36rpx 0rpx 30rpx;
    display: flex;
    border-bottom: 2rpx solid #eee;
    align-items: center;
    padding-bottom: 40rpx;

    &:last-child {
        border: none;
    }

    image {
        width: 60rpx;
        height: 72rpx;
    }

    .text {
        width: 90%;
        margin-left: 40rpx;
        text-overflow: ellipsis;

        .filename {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 500;
            font-size: $uni-font-size-base;
            margin-bottom: 10rpx;
        }

        .dates {
            font-family: PingFangSC;
            color: #666666;
            font-weight: 400;
            font-size: 24rpx;
        }

    }
    }


    // 搜索框
    .SearchBox {
    width: calc(100% - 40rpx);
    height: 72rpx;
    margin: 240rpx auto 20rpx auto;

    }

    // 弹出框
    .popup_box {
    width: 100%;
    height: 50%;
    background-color: $uni-bg-color;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
    text-align: center;

    .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        background: #efefef;
        color: #333;
        font-size: $uni-font-size-base;
        border-top-right-radius: 30rpx;
        border-top-left-radius: 30rpx;
    }

    .name {
        width: 100%;
        height: 18vh;

        .list {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            background-color: $uni-bg-color;
            color: #666;
            font-size: 26rpx;
        }

        .list_loading {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            color: #999;
            font-size: 26rpx;
            background-color: $uni-bg-color;
            border-top: 1rpx solid #efefef;
        }
    }
    }

    .loading-text {
    text-align: center;
    font-size: $uni-font-size-base;
    color: #666;
    padding: 20rpx 0;
    }

    scroll-view ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    }
    page {
    width: 100%;
    height: 100%;
    }

    #app {
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    :deep(.u-icon__icon) {
    background: #ffffff;
    width: 64rpx;
    height: 64rpx;
    justify-content: center;
    border-radius: 50%;
    }
    </style>